import type { FC, PropsWithChildren } from "react";
import { context } from "../context";

const Index: FC< PropsWithChildren<Partial<Resumes> & { style?: React.CSSProperties }>> = ({ children, style }) => {
  const { resume: { customization } } = context

  const { layout, header } = customization
  const customStyle: any = {
  }
  if (layout.detailsPosition === 'top') {
    if (header.detailsArrangement === 'column') {
      customStyle.display = 'block'
    }
    if (header.detailsArrangement.includes('grid')) {
      customStyle.display = 'grid'
      const cols = header.detailsArrangement.split('-')[1]
      customStyle.gridTemplateColumns = `repeat(${+cols}, 1fr)`
    }
    if (header.detailsArrangement === 'wrap') {
      customStyle.display = 'flex'
      customStyle.columnGap = '20px'
      customStyle.flexWrap = 'wrap'
      customStyle.justifyContent = 'center'
    }
    if (header.position === 'left' || header.position === 'right') {
      if (header.detailsArrangement.includes('grid')) {
        customStyle.display = 'grid'
        const cols = header.detailsArrangement.split('-')[1]
        customStyle.gridTemplateColumns = `repeat(${+cols}, 1fr)`
      }
      if (header.detailsArrangement === 'wrap') {
        customStyle.justifyContent = 'flex-start'
      }
    }
  }
  else {
    // customStyle.display = 'flex'
    // customStyle.flexDirection = 'column'
    // customStyle.gap = '10px'
  }
  return (<div style={{ ...customStyle, ...style }}>{children}</div>);
}
export default Index;
